<template>
    <div>
        <a-modal :width="600"
                 :title="title"
                 v-model="visible"
                 @cancel="handleCancel">
            <template slot="footer">
                <div class="drawer-bootom-button">
                    <a-popconfirm title="确定放弃编辑？"
                                  @confirm="handleCancel"
                                  okText="确定"
                                  cancelText="取消">
                        <a-button key="back">关闭</a-button>
                    </a-popconfirm>
                    <a-button key="submit"
                              type="primary"
                              :loading="loading"
                              @click="handleOk">保存</a-button>
                </div>
            </template>
            <a-form :form="form"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
                <a-form-item label="分类名称">
                    <a-input placeholder="请输入分类名称"
                             v-decorator="[ 'name', validatorRules.name]" />
                </a-form-item>
                <a-form-item label="跳转链接">
                    <a-input placeholder="请输入跳转链接地址!"
                             v-decorator="[ 'url', validatorRules.url]" />
                </a-form-item>
                <a-form-item label="排序">
                    <a-input-number id="inputNumber"
                                    v-decorator="[ 'order', validatorRules.order]"
                                    :min="1"
                                    :max="100"
                                    style="width:100%" />
                </a-form-item>
                <a-form-item label="状态">
                    <a-select v-decorator="[ 'state', validatorRules.state]"
                              placeholder="请选择状态!">
                        <a-select-option value="0">
                            已删除
                        </a-select-option>
                        <a-select-option value="1">
                            正常
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="Logo">
                    <span class="logo-box"
                          @click="showAvatarDialog">
                        <a-avatar :src="logo"
                                  :size="60" />
                    </span>
                </a-form-item>
            </a-form>
        </a-modal>
        <div>
            <avatar-upload field="file"
                           @crop-upload-success="cropUploadSuccess"
                           @crop-upload-fail="cropUploadFail"
                           v-model="showAvatarCutter"
                           :width="300"
                           :height="300"
                           :params="params"
                           url="/admin/images/upload"
                           img-format="png">
            </avatar-upload>
        </div>
    </div>
</template>
<script>
import { postFriendLink, updateFriendLink } from '@/api/api'
import avatarUpload from 'vue-image-crop-upload/upload-2.vue';
import pick from "lodash/pick";
export default {
    components: {
        'avatar-upload': avatarUpload
    },
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
            visible: false,
            loading: false,
            title: '',
            id: '',
            logo: '',
            form: this.$form.createForm(this),
            showAvatarCutter: false,//头像裁剪框
            params: { original: 'link' },
            validatorRules: {
                name: {
                    rules: [{
                        required: true,
                        message: '请输入网站名称!',
                    }]
                },
                url: {
                    rules: [{
                        required: true,
                        message: '请输入跳转链接!',
                    }]
                },
                order: {
                    rules: [{
                        required: true,
                        message: '请输入排序!',
                    }]
                },
            },

        }
    },
    methods: {
        add() {
            this.edit({ id: '' });
        },
        edit(record) {
            this.form.resetFields();
            this.visible = true;
            this.model = Object.assign({}, record);
            this.logo = this.model.logo;
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(record, 'name', 'url', 'order', 'state', 'logo'))
            });
            this.id = record.id;
        },
        showAvatarDialog() {
            this.showAvatarCutter = true;
        },
        cropUploadFail() {
            this.$message.error('头像上传失败');
        },
        cropUploadSuccess(response) {
            // this.showAvatarCutter = false;
            if (response.code === 200) {
                this.$message.success(response.message);
                this.logo = response.data;
            } else {
                this.$message.error(response.message);
            }
        },
        handleCancel() {
            this.visible = false;
        },
        handleOk() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.loading = true;
                    let formData = Object.assign(this.model, values, { logo: this.logo });
                    let requestFn;
                    if (!this.model.id) {//新增
                        this.loading = true;
                        requestFn = postFriendLink(formData).then(res => {
                            console.log("res", res);
                            if (res.code === 200) {
                                this.loading = false;
                                this.$message.success("添加成功!");
                                this.$emit('ok');
                                this.visible = false;
                            }
                        })
                    } else {//编辑
                        requestFn = updateFriendLink(this.id, formData).then(res => {
                            if (res.code === 200) {
                                this.loading = false;
                                this.$message.success("操作成功!");
                                this.$emit('ok');
                                this.visible = false;
                            }
                        })
                    }
                } else {

                }
            })
        },
    },
}
</script>
<style scoped>
.logo-box {
    cursor: pointer;
}
</style>